<script setup>
import AsideNav from './components/AsideNav.vue';
import Header from './components/Header.vue';
import { computed } from 'vue';
import { useRoute, useRouter, RouterLink } from 'vue-router';
// 获取当前路由对象
const route = useRoute();
const router = useRouter();

// 计算面包屑列表（从路由层级中提取，排除根路由）
const breadcrumbList = computed(() => {
    const operateRoutePath = '/back/pet-operate';
    // console.log(route.matched);
    return route.matched
        .filter(item => item.meta?.title)
        .map(item => {
            // console.log("item:", item);
            if (item.path === operateRoutePath) {
                const { type } = route.query;
                return {
                    title: type === 'add' ? '添加宠物' : '编辑宠物信息', 
                    path: item.path,
                };
            }

            return {
                title: item.meta.title, // 从路由meta中取标题
                path: item.path, // 路由路径（用于面包屑跳转）
                iconPath: item.meta?.iconPath || ''
            }   
        }
        
        );
});

const breadcrumbIcon = computed(() => {
    return breadcrumbList.value[0]?.iconPath || '/icon/paw-sharp-blue.png';
})

// 【添加/编辑宠物信息】 路由跳转
const goToOperate = (type, id) => {
    router.push({
        path: '/back/pet-operate',
        query: {
            type: type,
            id: id || '',
        }
    });
}
</script>

<template>
    <!-- 头部 -->
    <Header />
    <div class="main">
        <!-- 侧边栏 -->
        <AsideNav />

        <!-- 主体 -->
        <div class="pet-list">
            <div class="list-top">
                <div class="title">
                    <img :src="breadcrumbIcon" alt="" style="margin-right: 8px;margin-left: 18px;" >

                    <!-- 面包屑容器 -->
                    <div class="breadcrumb">
                        <span v-for="(item, index) in breadcrumbList" :key="item.path">
                            <!-- 面包屑项（支持点击跳转） -->
                            <RouterLink :to="item.path" class="breadcrumb-item">
                                {{ item.title }}
                            </RouterLink>
                            <!-- 分隔符（最后一项后不显示） -->
                            <strong v-if="index < breadcrumbList.length - 1" class="breadcrumb-separator"> / </strong>
                        </span>
                    </div>
                </div>

                <div v-if="route.path === '/back'">
                    <el-button 
                            type="text"
                            class="add-btn"
                            @click="goToOperate('add')"
                        >
                            <span>+ 添加宠物</span>
                    </el-button>
                </div>
            </div>
            <div class="list-content">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<style scoped>
.main {
    display: flex;
    background-color: #fafafa;
    height: calc(100vh - 64px);
    /* 视口高度 - Header 高度 */
}

.list-top {
    line-height: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.title {
    display: flex;
    align-items: center;
}
.add-btn {
    color: #4077FB;
    margin-right: 16px;
    padding: 20px 24px;
    background-color: #D0E6FD;
    font-size: 18px;
}

.pet-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 子元素垂直排列 */
    height: 100%;
    /* 继承 main 的高度 */
}

/* 面包屑容器样式 */
.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 22px;
    /* 字体大小匹配图中效果 */
}

/* 面包屑项样式（蓝色文字） */
.breadcrumb-item {
    color: #4077FB;
    /* 与图中蓝色一致 */
    text-decoration: none;
    /* 去掉RouterLink默认下划线 */
    font-weight: bold;
    /* 加粗匹配图中效果 */
}

/* 面包屑分隔符样式 */
.breadcrumb-separator {
    margin: 0 4px;
    /* 分隔符两侧间距 */
    color: #4077FB;
    /* 分隔符颜色与文字一致 */
}

.list-content {
    position: relative;
    margin-top: 12px;
    margin-left: 16px;
    padding: 0 16px;
    margin-right: 16px;
    height: 88%;
    overflow-y: auto;
    /* 内容超出时垂直滚动 */
    background-color: #fff;
}

/* 美化滚动条 */
.list-content::-webkit-scrollbar {
    width: 6px;
    /* 滚动条宽度 */
}

.list-content::-webkit-scrollbar-thumb {
    background-color: #e5e5e5;
    /* 滚动条滑块颜色 */
    border-radius: 3px;
    /* 滑块圆角 */
}

.list-content::-webkit-scrollbar-track {
    background-color: #fafafa;
    /* 滚动条轨道背景 */
}

/* 解决按钮 hover 变色：覆盖 edit-btn 的 hover 样式 */
:deep(.add-btn:hover) {
  background-color: #4077FB !important; /* 与默认背景色一致 */
  color: #fff !important;               /* 与默认文字色一致 */
  border: 0 !important;                 /* 保持无边框 */
}
</style>